<template>
	<view class="content">
		<view class="top">
			<image lazy-load="true" :src="topPoster" mode="widthFix" class="response"></image>
		</view>
		
		<view class="list">
			<view class="item" @click="lookDetail(item.id)" v-for="(item, index) in list" :key="index">
				<image lazy-load="true" :src="item.pic"></image>
				<view class="desc">{{item.name}}</view>
				<view class="price">{{item.priceScore}}彩豆</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				list: [],
				topPoster: ''
			}
		},
		onLoad() {
		},
		onShow() {
			this.addressList = [];
			this.addressId = '';
			this.getData();
		},
		methods: {
			lookDetail(id){
				uni.navigateTo({
					url: 'detail?id='+id
				});
			},
			getData() { //初始化数据
				let opts = {
					url: 'marking/getMarking',
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					this.list = rData.markingList;
					this.topPoster = rData.topPoster;
				}, error => {})
			}
		}
	}
</script>

<style>
	
	.list{
		display: flex;
		flex-wrap: wrap;
		
	}
	.item{
		background-color: #fff;
		width: 345rpx;
		border-radius: 15rpx;
		height: 500rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}
	.item image{
		width: 345rpx;
		height: 345rpx;
		border-top-right-radius: 15rpx;
		border-top-left-radius: 15rpx;
	}
	image{
		display: block;
	}
	.item .desc{
		padding: 10rpx 15rpx;
		font-size: 28rpx;
		height: 70rpx;
		overflow: hidden;
		color:#333333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.item .price{
		font-size: 30rpx;
		margin: 5rpx 15rpx;
		color: #e98f36;
		text-align: right;
		font-weight: 800;
	}
	
</style>
